<template>
	<view class="guide">
		<view class="image">
		 	<image src="/static/images/orders/zfb.png" mode=""></image>
			<view class="button" @click="openTips">
				打开支付宝
			</view>
		 </view>
		 <view class="zhezhao" v-show="iconFlag">
		 	<view class="tips" >
		 		<image src="/static/images/orders/zfb_tips.png" mode="widthFix"></image>
		 		<view class="icon" @click="close"> 
		 			x
				</view>
		 	</view>
		 </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFlag:false,
				url:'',
			};
		},
		onLoad(options) {
			this.url = options.url
			// #ifdef H5
				var ua = window.navigator.userAgent.toLowerCase();
				if(ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_'){
					
				}else{
					window.location.href = options.url
				}
			// #endif
		},
		methods:{
			openTips(){
				this.iconFlag = true;
				// #ifdef H5
					if(ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_'){
						
					}else{
						window.location.href = this.url
					}
				// #endif
				
			},
			close(){
				this.iconFlag = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
		background-color: #1677FF;
	}
	.guide{
		width: 100%;
		height: 100%;
		.image{
			width: 100%;
			height: 800upx;
			padding-top: 150upx;
			position: relative;
			/* background: url('/static/images/orders/zfb.png') no-repeat;
			background-size: 100% 100%; */
			>image{
				width: 100%;
				height: 100%;
			}
			.button{
				position: absolute;
			    bottom: 90upx;
			    left: 50%;
			    transform: translate(-50%,-90upx);
			    width: 60%;
			    text-align: center;
			    background: #fff;
			    padding: 30upx;
			    border-radius: 10upx;
			    font-size: 30upx;	
				color: #1677FF;
			}
		}
		.zhezhao{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			.tips{
				width: 80%;
				padding: 0 2%;
				box-sizing: border-box;
				// width: 400upx;
			    height: 120upx;
			    position: absolute;
			    top: 0;
			    right: 0;
				>image{
					width: 100%;
					height: 100%;
				}
				.icon{
					font-size: 30px;
					position: absolute;
					top: 10px;
					right: 10px;
					color: red;
					opacity: 0;
				}
			}
		}
		
	}
</style>
